<template>
    <div class="common-box" v-if="boxIsShow">
        <div class="common-content-box">
            <div class="common-content-bottom-box">
                <div class="table_search_box">
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="用户Id">
                          <el-input v-model="searchForm.uuid" placeholder="请输入" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="用户昵称">
                            <el-input v-model="searchForm.nickName" placeholder="请输入" size="small"></el-input>
                          </el-form-item>
                          <el-form-item label="手机号">
                            <el-input v-model="searchForm.tellphone" placeholder="请输入" size="small"></el-input>
                          </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="search" size="small">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="table_box">
                    <el-table
                        :data="tableData"
                        stripe
                        style="width: 100%">
                        <el-table-column
                        prop="id"
                        label="编号"
                        width="100"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="nickName"
                        label="名称"
                        width="150"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        label="状态"
                        width="120"
                        align="center">
                        <template slot-scope="scope">
                            {{ scope.row.state===1?'正常':'禁用' }}
                            <el-button @click="updateUserState(scope.row.uuid,scope.row.state)" type="text" size="medium">修改</el-button>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="上级"
                        width="150"
                        align="center">
                        <template slot-scope="scope">
                            {{ scope.row.parentId===0?'':scope.row.parentName }}
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="tellphone"
                        label="手机号"
                        align="center"
                        width="150">
                        </el-table-column>
                        <el-table-column
                        label="剩余积分"
                        align="center"
                        width="180">
                        <template slot-scope="scope">
                            {{ scope.row.point }}
                            <el-button @click="toCharge(scope.row.uuid)" type="text" size="medium">充值</el-button>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="每日限额"
                        align="center"
                        width="180">
                        <template slot-scope="scope">
                            {{ scope.row.quota==-1?'无限额': scope.row.quota}}
                            <el-button @click="setQuota(scope.row.uuid,scope.row.quota)" type="text" size="medium">设置</el-button>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="操作"
                        align="center">
                        <template slot-scope="scope">
                            <el-button @click="tologs(1,scope.row.uuid)" type="primary" size="small">充值统计</el-button>
                            <el-button @click="tologs(2,scope.row.uuid)" type="primary" size="small">消耗统计</el-button>
                            <el-button @click="tologs(3,scope.row.uuid)" type="primary" size="small">返佣统计</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                    :total="total"
                    :limit="pageSize"
                    :page="pageNumber"
                    :pageSize="pageSize"
                    @pageChange="pageChange"
                    ></pagination>
                </div>
            </div>
        </div>
        <addPoint-box
          ref="addPointBox"
          @close="
          getDataList();
          "
        ></addPoint-box>
        <editUserQuota-box
          ref="editUserQuotaBox"
          @close="
          getDataList();
          "
        ></editUserQuota-box>
        <userLogs-box
          ref="userLogsBox"
        ></userLogs-box>
    </div>
</template>
<script>
import Pagination from "@/components/pagination.vue";
import addPointBox from "@/components/dialogbox/addPointBox.vue";
import editUserQuotaBox from "@/components/dialogbox/editUserQuotaBox.vue";
import userLogsBox from "@/components/dialogbox/userLogsBox.vue";
export default {
    components: {
        Pagination,
        addPointBox,
        editUserQuotaBox,
        userLogsBox
    },
  data() {
    return {
        boxIsShow:false,
        searchForm:{
            uuid:"",
            nickName:"",
            tellphone:""
        },
        total: 0,
        pageSize: 30,
        pageNumber: 1,
        tableData:[]
    };
  },
  created() {
    
  },
  mounted(){
    
  },
  methods: {
    __init() {
      this.getDataList();
    },
    getDataList(){
      var url="manager/getUsersByPage";
      var params={
        ...this.searchForm,
        pageSize: this.pageSize,
        pageNum: this.pageNumber,
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 200) {
            this.tableData=res.data.list;
            this.total=res.data.total;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    pageChange(e) {
      this.pageNumber = e.page;
      this.getDataList();
    },
    search(){
      this.pageNumber=1;
      this.getDataList();
    },
    updateUserState(uuid,state){
      if(state==1){
        state=2
      }else{
        state=1
      }
      this.$confirm('是否修改此账户状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            var url="manager/updateUserState";
            var params={
                uuid:uuid,
                state:state
            }
            this.$post(url, params).then((res) => {
                if (res.code === 200) {
                    this.$message.success('操作完成');
                    this.getDataList();
                } else {
                    this.$message.error(res.msg)
                }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    },
    toCharge(uuid){
      if (this.$refs.addPointBox) {
        this.$refs.addPointBox.tkIsShow = true;
        this.$refs.addPointBox.title = "充值积分";
        this.$refs.addPointBox.__init(uuid);
      }
    },
    setQuota(uuid,quota){
      if (this.$refs.editUserQuotaBox) {
        this.$refs.editUserQuotaBox.tkIsShow = true;
        this.$refs.editUserQuotaBox.title = "设置每日限额";
        this.$refs.editUserQuotaBox.__init(uuid,quota);
      }
    },
    tologs(type,uuid){
      var title="";
      if(type==1){
        title="充值统计";
      }else if(type==2){
        title="消耗统计";
      }else if(type==3){
        title="返佣统计";
      }
      if (this.$refs.userLogsBox) {
        this.$refs.userLogsBox.tkIsShow = true;
        this.$refs.userLogsBox.title = title;
        this.$refs.userLogsBox.__init(uuid,type);
      }
    }
  }
}
</script>
<style scoped lang="scss">
  .common-box{
    background-color: #f9f9fb;
    height: 100%;
    position: relative;
  }
  .common-content-box{
    height: 95%;
    margin-top: 2%;
    width: 96%;
    display: inline-block;
  }
  .common-content-bottom-box{
    width: 100%;
    background-color: #fff;
    box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    height: calc(100vh - 110px);
  }
  .table_search_box{
    text-align: left;
    width: 96%;
    margin-left: 2%;
    display: inline-block;
    margin-top: 20px;
  }
  .table_box{
    width: 96%;
    margin-left: 2%;
    height: calc(100% - 255px);
  }
</style>